<template>
  <view class="profile-container">
    <!-- 头像区域 -->
    <view class="avatar-section">
      <view class="avatar-wrapper" @tap="changeAvatar">
        <image :src="userInfo.avatar" mode="aspectFill" class="avatar" />
        <view class="edit-icon">
          <text class="iconfont icon-camera"></text>
        </view>
      </view>
      <text class="tip">点击更换头像</text>
    </view>
    
    <!-- 基本信息 -->
    <view class="info-card">
      <view class="info-item" @tap="editNickname">
        <text class="label">昵称</text>
        <view class="value">
          <text>{{ userInfo.nickname }}</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
      
      <view class="info-item" @tap="editGender">
        <text class="label">性别</text>
        <view class="value">
          <text>{{ userInfo.gender === 1 ? '男' : '女' }}</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
      
      <view class="info-item" @tap="editBirthday">
        <text class="label">生日</text>
        <view class="value">
          <text>{{ userInfo.birthday || '请选择' }}</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
      
      <view class="info-item" @tap="editPhone">
        <text class="label">手机号</text>
        <view class="value">
          <text>{{ formatPhone(userInfo.phone) }}</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
      
      <view class="info-item" @tap="editEmail">
        <text class="label">邮箱</text>
        <view class="value">
          <text>{{ userInfo.email || '未绑定' }}</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
    </view>
    
    <!-- 实名认证 -->
    <view class="verify-card" @tap="goVerify">
      <view class="verify-info">
        <text class="title">实名认证</text>
        <text class="status">{{ userInfo.verified ? '已认证' : '未认证' }}</text>
      </view>
      <text class="iconfont icon-arrow-right"></text>
    </view>
    
    <!-- 隐私设置 -->
    <view class="privacy-card">
      <view class="card-header">
        <text class="title">隐私设置</text>
      </view>
      <view class="setting-list">
        <view class="setting-item">
          <text class="label">公开个人主页</text>
          <switch 
            :checked="privacy.publicProfile"
            @change="e => togglePrivacy('publicProfile', e.detail.value)"
            color="#67AFAB"
          />
        </view>
        <view class="setting-item">
          <text class="label">允许陌生人私信</text>
          <switch 
            :checked="privacy.allowMessage"
            @change="e => togglePrivacy('allowMessage', e.detail.value)"
            color="#67AFAB"
          />
        </view>
      </view>
    </view>
    
    <!-- 账号安全 -->
    <view class="security-card">
      <view class="card-header">
        <text class="title">账号安全</text>
      </view>
      <view class="security-list">
        <view class="security-item" @tap="changePassword">
          <view class="info">
            <text class="label">修改密码</text>
            <text class="desc">建议定期更换密码，确保账号安全</text>
          </view>
          <text class="iconfont icon-arrow-right"></text>
        </view>
        <view class="security-item" @tap="bindPhone">
          <view class="info">
            <text class="label">手机绑定</text>
            <text class="desc">已绑定手机号：{{ formatPhone(userInfo.phone) }}</text>
          </view>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
    </view>
    
    <!-- 退出登录 -->
    <button class="logout-btn" @tap="logout">退出登录</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 用户信息
const userInfo = ref({
  avatar: '/static/avatar/default.jpg',
  nickname: '张三',
  gender: 1,
  birthday: '1990-01-01',
  phone: '13800138000',
  email: 'example@email.com',
  verified: true
})

// 隐私设置
const privacy = ref({
  publicProfile: true,
  allowMessage: false
})

// 格式化手机号
const formatPhone = (phone) => {
  if (!phone) return '未绑定'
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}

// 更换头像
const changeAvatar = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      // 这里处理头像上传逻辑
      userInfo.value.avatar = res.tempFilePaths[0]
    }
  })
}

// 编辑昵称
const editNickname = () => {
  uni.navigateTo({
    url: '/pages/my/edit-nickname'
  })
}

// 编辑性别
const editGender = () => {
  uni.showActionSheet({
    itemList: ['男', '女'],
    success: (res) => {
      userInfo.value.gender = res.tapIndex + 1
    }
  })
}

// 编辑生日
const editBirthday = () => {
  uni.showDatePicker({
    current: userInfo.value.birthday,
    success: (res) => {
      userInfo.value.birthday = res.date
    }
  })
}

// 编辑手机号
const editPhone = () => {
  uni.navigateTo({
    url: '/pages/my/edit-phone'
  })
}

// 编辑邮箱
const editEmail = () => {
  uni.navigateTo({
    url: '/pages/my/edit-email'
  })
}

// 前往实名认证
const goVerify = () => {
  uni.navigateTo({
    url: '/pages/my/verify'
  })
}

// 切换隐私设置
const togglePrivacy = (key, value) => {
  privacy.value[key] = value
}

// 修改密码
const changePassword = () => {
  uni.navigateTo({
    url: '/pages/my/change-password'
  })
}

// 绑定手机
const bindPhone = () => {
  uni.navigateTo({
    url: '/pages/my/bind-phone'
  })
}

// 退出登录
const logout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 这里处理退出登录逻辑
        uni.reLaunch({
          url: '/pages/login/index'
        })
      }
    }
  })
}
</script>

<style lang="scss">
.profile-container {
  min-height: 100vh;
  background: $bg-color;
  padding-bottom: 40rpx;
  
  .avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60rpx 0;
    background: #fff;
    
    .avatar-wrapper {
      position: relative;
      margin-bottom: 20rpx;
      
      .avatar {
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
      }
      
      .edit-icon {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 48rpx;
        height: 48rpx;
        background: $primary-color;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .iconfont {
          font-size: 28rpx;
          color: #fff;
        }
      }
    }
    
    .tip {
      font-size: 26rpx;
      color: $text-secondary;
    }
  }
  
  .info-card {
    background: #fff;
    margin: 20rpx 0;
    
    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid $border-color;
      
      &:last-child {
        border-bottom: none;
      }
      
      .label {
        font-size: 30rpx;
        color: $text-primary;
      }
      
      .value {
        display: flex;
        align-items: center;
        
        text {
          font-size: 30rpx;
          color: $text-regular;
          
          &.iconfont {
            font-size: 32rpx;
            color: $text-secondary;
            margin-left: 12rpx;
          }
        }
      }
      
      &:active {
        background: $bg-color;
      }
    }
  }
  
  .verify-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 30rpx;
    margin: 20rpx 0;
    
    .verify-info {
      .title {
        font-size: 30rpx;
        color: $text-primary;
        margin-bottom: 8rpx;
        display: block;
      }
      
      .status {
        font-size: 26rpx;
        color: $success;
      }
    }
    
    .iconfont {
      font-size: 32rpx;
      color: $text-secondary;
    }
    
    &:active {
      background: $bg-color;
    }
  }
  
  .privacy-card,
  .security-card {
    background: #fff;
    margin: 20rpx 0;
    
    .card-header {
      padding: 30rpx;
      border-bottom: 1rpx solid $border-color;
      
      .title {
        font-size: 32rpx;
        color: $text-primary;
        font-weight: bold;
      }
    }
    
    .setting-list {
      .setting-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx;
        border-bottom: 1rpx solid $border-color;
        
        &:last-child {
          border-bottom: none;
        }
        
        .label {
          font-size: 30rpx;
          color: $text-primary;
        }
      }
    }
    
    .security-list {
      .security-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx;
        border-bottom: 1rpx solid $border-color;
        
        &:last-child {
          border-bottom: none;
        }
        
        .info {
          .label {
            font-size: 30rpx;
            color: $text-primary;
            margin-bottom: 8rpx;
            display: block;
          }
          
          .desc {
            font-size: 26rpx;
            color: $text-secondary;
          }
        }
        
        .iconfont {
          font-size: 32rpx;
          color: $text-secondary;
        }
        
        &:active {
          background: $bg-color;
        }
      }
    }
  }
  
  .logout-btn {
    width: calc(100% - 60rpx);
    height: 88rpx;
    line-height: 88rpx;
    margin: 40rpx auto;
    font-size: 32rpx;
    color: $warning;
    background: #fff;
    border-radius: $radius-lg;
    
    &:active {
      opacity: 0.8;
    }
  }
}
</style>